<template>
	<div class="login flex flex-x flex-y">
		<div class="login-window">
			<h3 class="title">
				成绩查询系统
				<span>/ login</span>
			</h3>
			<el-form
				:model="ruleForm" 
				:rules="rules" 
				ref="ruleForm" 
				label-width="66px">
				<el-form-item label="用户名" prop="userName">
					<el-input v-model="ruleForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="passWord">
					<el-input v-model="ruleForm.passWord" type="password"></el-input>
				</el-form-item>
			</el-form>
			<el-button @click="login()" type="primary" class="submit">登录</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			ruleForm:{
				userName:"admin",
				passWord:"admin"
			},
			rules:{
				userName: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				passWord: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
			}
		}
	},
	methods:{
		login:function(){
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					localStorage.setItem('token','eyJhbGciOiJIUzUxMiJ9');
					this.$router.push('/');
				}
			});
		}
	},
	mounted(){
		
	}
}
</script>

<style lang="scss" scoped>
	.login{
		background-color: #fff;
		height: 100vh;
		background-image:linear-gradient(#2f323f, #444,#2f323f);
		.login-window{
			width: 400px;
			height: 600px;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20px 50px;
			border-radius: 6px;
			.title{
				color: #464647;
				font-size: 24px;
				padding: 15px 0 40px 0;
				span{
					color: #aeb0bd;
					font-size: 13px;
				}
			}
			.submit{
				width: 100%;
				margin-top: 280px;
			}
		}
	}
</style>